<template>
  <div class="row-right">
    <!-- 获取 /my/gettechnicians data节点下:isExpert(1:审核中只展示  2:表示审核通过  0:表示未通过(technicians有数据)或者初始状态(technicians无数据)) -->
    <!-- 新曾或修改 /my/exTechnicians -->
    <transition name="slide-fade">
      <div class="form-group alert-aside" v-if="alertShow">
        <div class="col-xs-12">
          <div class="alert alert-success" role="alert" v-if="isExpert==2">审核通过</div>
          <div class="alert alert-info" role="alert" v-else-if="isExpert==1">审核中</div>
          <div class="alert alert-danger" role="alert" v-else-if="isExpert==0&&technicians.name">未通过</div>
        </div>
      </div>
    </transition>
    <div class="row">
      <div class="col-xs-12">
      <form class="common-form">
        <div class="form-group row">
          <div class="col-xs-12 col-md-3">
            <label for="">真实姓名：</label>
            <input type="email" class="form-control" :disabled="isExpert==1" v-model="technicians.name">
          </div>
          <div class="col-xs-12 col-md-6">
            <label for="">身份证号：</label>
            <template v-if="isExpert==2">
              <input type="text" class="form-control" v-model="technicians.showCardId">
            </template>
            <template v-else>
              <input type="text" class="form-control" :disabled="isExpert==1" v-model="technicians.cardId">
            </template>
          </div>
          <div class="col-xs-12 col-md-3">
            <label for="">学历：</label>
            <select name="" id="" class="form-control" :disabled="isExpert==1" v-model="technicians.educationalBackground">
              <option value="初中">初中</option>
              <option value="高中">高中</option>
              <option value="大专">大专</option>
              <option value="本科">本科</option>
              <option value="研究生">研究生</option>
              <option value="博士">博士</option>
            </select>
            <!-- <input type="text" class="form-control" :disabled="isExpert==1" v-model="technicians.educationalBackground"> -->
          </div>
        </div>
        <div class="form-group row">
          <div class="col-xs-12 col-md-3">
            <label for="">职称：</label>
            <input type="text" class="form-control" :disabled="isExpert==1" v-model="technicians.title">
          </div>
          <div class="col-xs-12 col-md-6">
            <label for="">工作单位：</label>
            <input type="text" class="form-control" :disabled="isExpert==1" v-model="technicians.workCompany">
          </div>
          <div class="col-xs-12 col-md-3">
            <label for="">职务：</label>
            <input type="text" class="form-control" :disabled="isExpert==1" v-model="technicians.post">

          </div>
        </div>
        <div class="form-group row">
          <div class="col-xs-12 col-md-9">
            <label for="">个人介绍：</label>
            <input type="text" class="form-control" :disabled="isExpert==1" placeholder="1000字以内，技术领域，工作经历" v-model="technicians.desc">
          </div>
          <div class="col-xs-12 col-md-3">
            <label for="">工作年限：</label>
            <input type="number" class="form-control" :disabled="isExpert==1" v-model="technicians.workYear">
          </div>
        </div>
        <div class="form-group text-right btn-box">
          <a href="javascript:;" class="btn-ghost" @click="handleTechnicians()">保存</a>
        </div>
      </form>
    </div></div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import util from '@/assets/js/utils.js'
import Cookies from 'js-cookie'
export default {
  name: 'my-into',
  data() {
    return {
      alertShow: true,
      isExpert: -1,
      technicians: {
        name: '',
        cardId: '',
        educationalBackground: '本科',
        title: '',
        post: '',
        workCompany: '',
        workYear: '',
        desc: ''
      }
    }
  },
  created() {
    let that = this
    this.fetchtechnicians()
    setTimeout(function() {
      that.alertShow = false
    }, 2000)
  },
  methods: {
    fetchtechnicians() {
      let that = this
      axios
        .post('/my/getUserInfo', qs.stringify({}))
        .then(function(response) {
          if (response.data.suc == 200) {
            that.isExpert = response.data.data.isExpert
            if (response.data.data.technicians != null) {
              that.technicians = response.data.data.technicians
            }
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleTechnicians() {
      // let that = this
      let technicians = this.technicians
      if (!technicians.cardId && technicians.showCardId)
        technicians.cardId = technicians.showCardId
      axios
        .post('/my/exTechnicians', qs.stringify(technicians))
        .then(function(response) {
          if (response.data.suc == 200) {
            alert('提交成功')
          } else if (response.data.errCode == 'ERROR_CODE_100006') {
            alert('正在审核中,不可以修改资料')
          } else {
            alert('提交失败')
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.alert-aside {
  position: absolute;
  right: 10%;
  top: -50px;
  width: 180px;
  z-index: 100;
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
